<template>
	<div class="home">
		<div class="home-main">
			<section id="imgCode">
				<h2>图形验证码 imgCode</h2>
				<div>
					<VImgCode :randomLine="true" fillStyle="#333" :nums="6" />
				</div>
			</section>
			<section id="swiper">
				<h2>轮播图 swiper</h2>
				<div>
					<VSwiper height="300px">
						<VSwiperItem v-for="item in swiperItemList" :key="item.id"
							><img :src="item.url" alt=""
						/></VSwiperItem>
					</VSwiper>
				</div>
			</section>
			<section id="radio">
				<h2>单选框 radio</h2>
				<div class="flex padding">
					<v-radio v-model="radio" :label="1" @change="changeRadio"
						>选项一</v-radio
					>
					<v-radio v-model="radio" :label="2">选项二</v-radio>
					<v-radio v-model="radio" :label="3">选项三</v-radio>
				</div>
				<div class="flex padding">
					<v-radio
						@change="radioChange"
						v-for="(item, index) in relationArr"
						:key="item"
						v-model="radio1"
						:disabled="index == 2"
						:label="index"
					>
						<span>{{ item }}</span>
					</v-radio>
				</div>
			</section>
			<section id="checkBox">
				<h2>多选框 checkBox</h2>
				<div class="flex padding">
					<v-check-box-group v-model="checkBoxArr1">
						<v-check-box label="1">广州</v-check-box>
						<v-check-box label="2">上海</v-check-box>
						<v-check-box label="3">北京</v-check-box>
						<v-check-box label="4">深圳</v-check-box>
					</v-check-box-group>
				</div>
				<div class="flex padding">
					<v-check-box-group startAll v-model="checkBoxArr2">
						<v-check-box label="1">广州</v-check-box>
						<v-check-box label="2">上海</v-check-box>
						<v-check-box label="3">北京</v-check-box>
						<v-check-box label="4">深圳</v-check-box>
					</v-check-box-group>
				</div>
				<div class="flex padding">
					<v-check-box-group startAll v-model="checkBoxArr3" :max="3">
						<v-check-box label="1">广州</v-check-box>
						<v-check-box label="2">上海</v-check-box>
						<v-check-box label="3">北京</v-check-box>
						<v-check-box label="4">深圳</v-check-box>
					</v-check-box-group>
				</div>
			</section>
			<section id="input">
				<h2>输入框 input</h2>
				<div class="flex padding">
					<v-input v-model="inputValue" placeHolder="请输入..."></v-input>
				</div>
				<div class="flex padding">
					<v-input
						v-model="inputValue"
						placeHolder="请输入..."
						:disabled="true"
					></v-input>
				</div>
				<div class="flex padding">
					<v-input
						v-model="inputValue2"
						placeHolder="请输入"
						:showPassword="true"
					></v-input>
				</div>
				<div class="flex padding">
					<v-input
						v-model="inputValue3"
						placeHolder="请输入"
						:clearable="true"
						maxlength="50"
						:showWordLimit="true"
					></v-input>
				</div>
				<div class="flex padding">
					<v-input
						type="textarea"
						v-model="inputValue4"
						placeHolder="请输入"
						:showWordLimit="true"
						maxlength="100"
						:autosize="{ minRows: 4, maxRows: 10 }"
					></v-input>
				</div>
			</section>
			<section id="inputNumber">
				<h2>计数器 inputNumber</h2>
				<div class="flex padding">
					<v-input-number v-model="inputNum1"></v-input-number>
				</div>
				<div class="flex padding">
					<v-input-number v-model="inputNum3" :disabled="true"></v-input-number>
				</div>
				<div class="flex padding">
					<v-input-number
						v-model="inputNum2"
						:step="0.11"
						:precision="2"
						:min="2"
						:max="5"
					></v-input-number>
				</div>
			</section>
			<section id="select">
				<h2>选择器 select</h2>
				<div class="flex padding">
					<v-select v-model="value" :disabled="true" placeHolder="请选择">
						<v-option label="暗黑月影" :value="0"></v-option>
						<v-option label="鬼魅森林" :value="1"></v-option>
						<v-option label="共工全套" :value="2"></v-option>
						<v-option label="万象界神力" :value="3"></v-option>
					</v-select>
				</div>
				<div class="flex padding">
					<v-select
						v-model="value"
						:disabled="false"
						:clearable="true"
						placeHolder="请选择"
					>
						<v-option label="暗黑月影" :value="0"></v-option>
						<v-option label="鬼魅森林" :value="1" :disabled="true"></v-option>
						<v-option label="共工全套" :value="2"></v-option>
						<v-option label="万象界神力" :value="3"></v-option>
					</v-select>
				</div>
			</section>
			<section id="switch">
				<h2>开关 switch</h2>
				<div class="flex padding">
					<v-switch v-model="switchValue1" @change="changeSwitch"></v-switch>
				</div>
				<div class="flex padding">
					<v-switch v-model="switchValue3" :disabled="true"></v-switch>
				</div>
				<div class="flex padding">
					<v-switch
						v-model="switchValue2"
						:width="46"
						:disabled="false"
						activeColor="#f40"
						inactiveColor="#555"
						activeText="开"
						inactiveText="关"
						@change="changeSwitch"
					></v-switch>
				</div>
			</section>
			<section id="avatarList">
				<h2>头像列表 avatarList</h2>
				<div class="flex padding">
					<v-avatar-list
						:value="avatarList"
						:disabled="false"
						imgAttr="a"
						:showHoverText="false"
						hovertextAttr="n"
					>
					</v-avatar-list>
				</div>
				<div class="flex padding">
					<v-avatar-list
						:value="avatarList"
						:disabled="false"
						imgAttr="a"
						:max="2"
						@click="avatarClick"
					>
					</v-avatar-list>
				</div>
				<div class="flex padding">
					<v-avatar-list
						:value="avatarList"
						:disabled="false"
						imgAttr="a"
						imgWidth="22px"
						:showHoverText="true"
						hovertextAttr="n"
						:max="2"
					>
					</v-avatar-list>
				</div>
			</section>
			<section id="countUp">
				<h2>数字动画 countUp</h2>
				<div class="flex padding">
					<v-count-up
						:value="countUpValue1"
						:startValue="0"
						:time="5000"
						:useease="false"
						:reset="reset"
						@end="end()"
					></v-count-up>
				</div>
				<div class="flex padding">
					<v-count-up
						:value="countUpValue1"
						:startValue="0"
						:time="5000"
						:useease="true"
						:reset="reset"
						@end="end()"
					></v-count-up>
				</div>
				<div class="flex padding">
					<v-count-up
						:value="countUpValue1"
						:startValue="0"
						:time="5000"
						:useease="true"
						:tofixed="2"
						:reset="reset"
					></v-count-up>
				</div>
				<div class="flex padding">
					<v-count-up
						:value="countUpValue2"
						:startValue="countUpValue2 - 500"
						:time="5000"
						:useease="true"
						:tofixed="2"
						:reset="reset"
						:separator="true"
						@end="end()"
					></v-count-up>
				</div>
				<div>
					<button @click="reset = !reset">重新开始</button>
				</div>
			</section>
			<section id="slider">
				<h2>滑块 slider</h2>
				<div class="flex padding w560">
					<v-slider
						v-model="sliderValue1"
						:disabled="true"
						:decimal="0"
						:inputNumber="false"
					></v-slider>
				</div>
				<div class="flex padding w560">
					<v-slider
						v-model="sliderValue4"
						:disabled="false"
						:decimal="2"
						:inputNumber="false"
					></v-slider>
				</div>
				<div class="flex padding w560">
					<v-slider
						v-model="sliderValue2"
						:disabled="false"
						:decimal="0"
						:inputNumber="true"
					></v-slider>
				</div>
				<div class="flex padding w560">
					<v-slider
						v-model="sliderValue3"
						:disabled="false"
						:decimal="0"
						:inputNumber="true"
						:min="10"
					></v-slider>
				</div>
			</section>
			<section id="timePicker">
				<h2>时间选择器 timePicker</h2>
				<div class="flex padding">
					<v-time-picker
						v-model="timePickerVal"
						placeholder="请选择时间"
						:disabled="true"
					></v-time-picker>
				</div>
				<div class="flex padding">
					<v-time-picker
						v-model="timePickerVal2"
						placeholder="请选择时间"
					></v-time-picker>
				</div>
			</section>
			<section id="upload">
				<h2>上传头像 upload</h2>
				<div class="flex padding">
					<v-upload
						type="avatar"
						action="https://jsonplaceholder.typicode.com/posts/"
						:withCredentials="true"
						:beforeUpload="beforeUpload"
						@onError="onerror"
					></v-upload>
				</div>
			</section>
			<section id="message">
				<h2>消息提示 message</h2>
				<div class="flex padding">
					<button @click="messageClick('info')">正常消息</button>
					<button @click="messageClick('warning')">警告消息</button>
					<button @click="messageClick('error')">错误消息</button>
					<button @click="messageClick('success')">正确消息</button>
					<button @click="messageClick('success', true)">
						消息(显示关闭按钮)
					</button>
					<button @click="messageClick1('success')">
						不自动关闭（duration为0）
					</button>
				</div>
			</section>
			<section id="notification">
				<h2>消息通知 notification</h2>
				<div class="flex padding">
					<button @click="notificationClick(false)">消息通知</button>
					<button @click="notificationClick(true)">
						消息通知(显示关闭按钮)
					</button>
				</div>
				<p>弹出位置</p>
				<div class="flex padding">
					<button @click="notificationClick(false, 'top-right')">右上</button>
					<button @click="notificationClick(false, 'bottom-right')">
						右下
					</button>
					<button @click="notificationClick(false, 'top-left')">左上</button>
					<button @click="notificationClick(false, 'bottom-left')">左下</button>
				</div>
			</section>
			<section id="messageBox">
				<h2>消息弹窗 messageBox</h2>
				<div class="flex padding">
					<button @click="messageBoxClick({ type: 'info' })">消息弹窗</button>
					<button @click="messageBoxClick({ type: 'warning' })">
						消息弹窗(warning)
					</button>
					<button @click="messageBoxClick({ type: 'error' })">
						消息弹窗(error)
					</button>
					<button @click="messageBoxClick({ type: 'success' })">
						消息弹窗(success)
					</button>
				</div>
				<div class="flex padding">
					<button @click="messageBoxClick({ showClose: false })">
						消息弹窗
					</button>
					<button @click="messageBoxClick({ showClose: true })">
						消息弹窗(显示关闭按钮)
					</button>
				</div>
			</section>
			<section id="pagination">
				<h2>分页 pagination</h2>
				<v-pagination
					layout="prev,pager,next"
					:currentPage.sync="currentPage"
					:pageCount="pageCount"
					:pageSize="10"
					:total="100"
					@prev-click="preClick"
				>
				</v-pagination>
				<br />
				<v-pagination
					layout="prev,pager,next,jumper"
					:currentPage.sync="currentPage"
					:pageCount="pageCount"
					:pageSize="10"
					:total="100"
					@prev-click="preClick"
				>
				</v-pagination>
				<br />
				<v-pagination
					:currentPage.sync="currentPage"
					:pageCount="pageCount"
					:pageSize="10"
					:total="100"
					@prev-click="preClick"
				>
				</v-pagination>
				<br />
				<v-pagination
					:currentPage.sync="currentPage"
					:pageCount="pageCount"
					:pageSize="10"
					:total="100"
					:background="true"
					@prev-click="preClick"
				>
				</v-pagination>
				<br />
				<v-pagination
					:currentPage.sync="currentPage"
					:pageCount="pageCount"
					:pageSize="10"
					:total="100"
					layout="prev,pager,next,jumper,slot"
					:background="true"
					@prev-click="preClick"
				>
					<span style="margin-left: 10px; text-decoration: underline"
						>自定义内容</span
					>
				</v-pagination>
				<br />
				<v-pagination
					layout="prev,next"
					:currentPage.sync="currentPage"
					:pageCount="pageCount"
					:pageSize="10"
					:total="100"
					prevText="上一页"
					nextText="下一页"
					:background="true"
					@prev-click="preClick"
				>
				</v-pagination>
			</section>
			<section id="progress">
				<h2>进度条 progress</h2>
				<v-progress :percentage="30" status="success"></v-progress>
				<br />
				<v-progress
					:percentage="10"
					:textInside="true"
					status="success"
					:strokeWidth="13"
				>
					></v-progress
				>
				<br />
				<v-progress
					:percentage="10"
					status="success"
					:width="200"
					:strokeWidth="10"
					type="circle"
				></v-progress>
				<br />
				<v-progress
					:percentage="50"
					status="success"
					:width="200"
					:strokeWidth="10"
					type="dashboard"
				></v-progress>
			</section>
			<section id="tooltip">
				<h2>文字提示 tooltip</h2>
				<v-tooltip content="我是提示">
					<button>哈哈哈</button>
				</v-tooltip>
			</section>
			<section id="loading">
				<h2>加载中 loading</h2>
				<button @click="loading(true)">开启加载</button
				><button @click="loading(false)">关闭加载</button>
				<button @click="loading(true, 'full')">默认加载位置</button>
				<div
					ref="loading"
					style="
						position: relative;
						width: 500;
						height: 300px;
						border: 1px solid #eee;
						padding: 20px;
						margin-top: 20px;
					"
				></div>
			</section>
			<section id="suspendBall">
				<h2>悬浮球(移动端) suspendBall</h2>
				<div
					style="
						position: relative;
						width: 500;
						height: 300px;
						border: 1px solid #eee;
						margin-top: 20px;
						overflow: hidden;
					"
				>
					<VSuspendBall
						:position="{
							top: '100px',
							left: '100px',
						}"
						dragableRange="parent"
						:indent="true"
						:indentNearEdge="true"
						:needNearEdge="true"
						:indentNearEdgeDelay="2000"
						slotsDirection=""
						@touchFunc="touchFunc"
					>
					</VSuspendBall>
				</div>
			</section>
		</div>
		<div class="home-side">
			<HomeSide ref="homeSide" />
		</div>
	</div>
</template>

<script>
import VRadio from "@/components/radio/radio";
import VCheckBoxGroup from "@/components/checkBox/checkbox-group";
import VCheckBox from "@/components/checkBox/checkbox";
import VInput from "@/components/input/input";
import VInputNumber from "@/components/inputNumber/inputnumber";
import VSelect from "@/components/select/select.vue";
import VOption from "@/components/select/option.vue";
import VSwitch from "@/components/switch/switch.vue";
import VAvatarList from "@/components/avatarList/avatarList.vue";
import VCountUp from "@/components/countUp/countUp.vue";
import VSlider from "@/components/slider/slider.vue";
import VTimePicker from "@/components/timePicker/timePicker";
import VUpload from "@/components/upload/index.vue";
import HomeSide from "@/components/homeSide.vue";
import VPagination from "@/components/pagination/index.js";
import VProgress from "@/components/progress/index.vue";
import VTooltip from "@/components/tooltip/index.js";
import VSuspendBall from "@/components/suspendBall/index.vue";
import VSwiper from "@/components/swiper/index.vue";
import VSwiperItem from "@/components/swiper/swiperItem.vue";
import VImgCode from "@/components/imgCode/index.vue";
export default {
	components: {
		VRadio,
		VCheckBox,
		VCheckBoxGroup,
		VInput,
		VInputNumber,
		VSelect,
		VOption,
		VSwitch,
		VAvatarList,
		VCountUp,
		VSlider,
		VTimePicker,
		VUpload,
		HomeSide,
		VPagination,
		VProgress,
		VTooltip,
		VSuspendBall,
		VSwiper,
		VSwiperItem,
		VImgCode,
	},
	data() {
		return {
			radio: 1,
			radio1: 1,
			relationArr: ["学生啊", "家长啊", "老师啊"],
			checkBoxArr1: [],
			checkBoxArr2: ["1", "2"],
			checkBoxArr3: ["1"],
			inputValue: "大漠孤烟直",
			inputValue2: "",
			inputValue3: "长河落日圆",
			inputValue4: "八百里分麾下至",
			inputNum1: 1,
			inputNum2: 1,
			inputNum3: 10,
			value: "",
			switchValue1: true,
			switchValue2: false,
			switchValue3: false,
			avatarList: [
				{
					n:
						"邓哒哒发生法沙发沙发的邓哒哒发生法沙发沙abcdefafasfwegadgasdfsdfa",
					a:
						"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1441836571,2166773131&fm=26&gp=0.jpg",
				},
				{
					n: "邓哒哒",
					a:
						"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=221521724,481371925&fm=26&gp=0.jpg",
				},
				{
					n: "曹哒哒",
					a:
						"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=221521724,481371925&fm=26&gp=0.jpg",
				},
				{
					n: "答哒哒",
					a:
						"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=221521724,481371925&fm=26&gp=0.jpg",
				},
			],
			countUpValue1: 1234,
			countUpValue2: 1234,
			reset: false,
			sliderValue1: 0,
			sliderValue2: 20,
			sliderValue3: 90,
			sliderValue4: 100,
			timePickerVal: "18:20:30",
			timePickerVal2: "19:00:00",
			currentPage: 5,
			pageCount: 10,
			swiperItemList: [],
		};
	},
	watch: {
		checkBoxArr1() {
			console.log(this.checkBoxArr1);
		},
		inputValue(val) {
			console.log(val);
		},
		inputNum1(val) {
			console.log(val);
		},
		switchValue(val) {
			console.log(val);
		},
		sliderValue3(val) {
			console.log(val);
		},
		timePickerVal2(val) {
			console.log(val);
		},
	},

	methods: {
		test123() {
			console.log("shi de");
		},
		changeRadio(e) {
			console.log(e);
		},
		radioChange(c) {
			console.log(c);
		},
		bbb() {},
		changeSwitch(val) {
			console.log(val);
		},
		avatarClick(val) {
			alert(JSON.stringify(val));
		},
		end() {
			console.log("end");
		},
		onerror(e, file) {
			console.log(e, 111, file);
		},
		beforeUpload(e) {
			console.log(e.size);
			return true;
		},
		messageClick(type, showClose) {
			this.$message({
				message: type,
				type,
				showClose,
				onClose() {
					console.log("关闭了");
				},
			});
		},
		messageClick1(type) {
			this.$message({
				message: type,
				type,
				showClose: true,
				duration: 0,
			});
		},
		notificationClick(showClose, position) {
			this.$notification({
				title: "放假通知",
				message: "我们要放假了！",
				showClose,
				position: position ? position : "top-right",
				duration: 3000,
			});
		},
		messageBoxClick(options) {
			const d = {
				type: "warning",
				title: "这是标题",
				beforeClose: this.beforeClose,
				callback: this.callback,
				closeOnHashChange: true,
				message: "这是内容？",
			};
			const _options = Object.assign(d, options);
			this.$messageBox(_options);
		},
		callback(action, jjj) {
			console.log(action, jjj);
			this.$message({ message: action + ":关闭了" });
		},
		beforeClose(a, b, done) {
			console.log("关闭前");
			console.log(a, b, done);
			setTimeout(() => {
				done();
			}, 100);
		},
		preClick() {
			console.log("点击了上一页");
		},
		loading(type, position) {
			if (type) {
				this.$loading({
					target: position ? "" : this.$refs.loading,
					background: "rgba(0,0,0,0.45)",
					autoClose: true,
					autoCloseDuration: 3000,
				});
			} else {
				this.$loading.close();
			}
		},
		touchFunc() {
			console.log("我点击了悬浮球");
		},
	},

	mounted() {
		this.$on("testevent", this.test123);

		setTimeout(() => {
			this.$emit("testevent");
		}, 5000);

		setTimeout(() => {
			this.swiperItemList = [
				{
					id: 1,
					url:
						"https://img2.baidu.com/it/u=521939595,1130261233&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
				},
				{
					id: 2,
					url:
						"https://img1.baidu.com/it/u=700675537,3936578503&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
				},
				{
					id: 3,
					url:
						"https://img1.baidu.com/it/u=2774261946,3406162344&fm=253&fmt=auto&app=138&f=JPEG?w=954&h=500",
				},
				{
					id: 4,
					url:
						"https://img2.baidu.com/it/u=2147843660,3054818539&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313",
				},
			];
		}, 1000);
	},
};
</script>
<style lang="less" scoped>
.home {
	.home-main {
		width: @main-width;
		margin: 0 auto;
		border-top: 0;
		border-bottom: 0;
		& > section {
			margin-bottom: 20px;
			padding: 30px;
			border-radius: 10px;
			background: #fff;
		}
	}
	.home-side {
		position: fixed;
		top: calc(@menu-height + 15px);
		right: 15px;
		width: 245px;
		padding: 20px;
		max-height: 80vh;
		border: 1px solid @border-color;
		border-radius: 10px;
		overflow: auto;
		background: #fff;
		z-index: 100;
		box-shadow: 0 18px 20px -10px #ddd, 0 8px 10px -10px #ddd;
	}
}
h2 {
	margin-bottom: 15px;
}
section {
	padding: 60px 0;
	border-bottom: 1px double @border-color;
}
button {
	margin-right: 10px;
}
.w300 {
	width: 300px;
}
.w560 {
	width: 660px;
}

.v-swiper-wrapper .v-swiper-item {
	width: 100%;
	font-size: 0;
	background: palegoldenrod;
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
</style>
